<include file="public@header"/>
<link rel="stylesheet" href="__STATIC__/student/flowChart.css" />
<!--公共样式-->
<link rel="stylesheet" href="__STATIC__/calendar/css/reset.css" />
<!--主要样式-->
<link rel="stylesheet" type="text/css" href="__STATIC__/calendar/css/simple-calendar.css">
<link rel="stylesheet" href="__STATIC__/calendar/css/calendar.css" />
<style>
.attendance_in {
	background-color: #FFEBEC;
}

.attendance_out {
	background-color: #E5FBFA;
}
</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('Student/index')}">查询学生</a></li>
        <li><a href="{:url('Student/add_student')}">添加学生</a></li>
        <li class="active"><a>学生详情</a></li>
    </ul>
	
	<div class="container-fluid" style="margin-top:20px;padding:0px;">
		<div class="row-fluid">
			<div class="col-md-3" style="padding-left:0px;">
				<!--事件时间轴-->
				<div class="flowChart" style="background:#fff">
					<!--左侧轴-->
					<div class="flowChart-left">
						<!--虚线-->
						<div class="dashed"></div>
					</div>
					<!--右侧内容-->
					<div class="flowChart-right">
						<!--一个节点-->
						<div class="oneNode">
							<!--左侧小球-->
							<div class="check check-danger"><p style="line-height:30px">登记</p></div>
							<div class="tag-boder">
								<div class="tag">
								</div>
							</div>
							<!--右侧内容-->
							<div class="NodeDetail">
								<!--上-->
								<!-- <div class="NodeDetail-title"> -->
									<!-- 头像 -->
									<!-- <img src="img/headImg.jpg" /> -->
									<!-- 内容 -->
									<!-- <div class="details"> -->
										<!-- <h4>陈总</h4> -->
										<!-- <p>发起流程</p> -->
									<!-- </div> -->
								<!-- </div> -->
								<!--中-->
								<div class="NodeDetail-content">
									<span class="badge">{:date('Y-m-d H:i:s',$student['buildtime'])}</span>
									<p>登记入系统</p>
								</div>
								<!--下-->
								<!-- <div class="NodeDetail-footer"> -->
									<!-- <span>2017-10-31 22:22:31</span> -->

								<!-- </div> -->
							</div>
						</div>
						<if condition="isset($sign_data)&&$sign_data!=''">
						<foreach name="sign_data" item="vo">
						<div class="oneNode">
							<!--左侧小球-->
							<div class="check check-success"><p style="line-height:30px">报名</p></div>
							<div class="tag-boder">
								<div class="tag">
								</div>
							</div>
							<!--右侧内容-->
							
							<div class="NodeDetail">
								<!--上-->
								<!-- <div class="NodeDetail-title"> -->
									<!-- 头像 -->
									<!-- <img src="img/headImg.jpg" /> -->
									<!-- 内容 -->
									<!-- <div class="details"> -->
										<!-- <h4>小李</h4> -->
										<!-- <p>审批</p> -->
									<!-- </div> -->
								<!-- </div> -->
								<!--中-->
								<div class="NodeDetail-content">
									<span class="badge">{:date('Y-m-d H:i:s',$vo.last_edit_time)}</span>
									<p>报名班级：{$vo.class_name}</p>
									<p>任课老师：{$vo.teacher}</p>
									<p>教室：{$vo.classroom}</p>
								</div>
								<!--下-->
								<!-- <div class="NodeDetail-footer"> -->
									<!-- <span>2017-10-31 22:22:31</span> -->

								<!-- </div> -->
							</div>
							
						</div>
						</foreach>
							</if>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="inner">
					<div id='calendar' class="sc-calendar">
						<div class="sc-header">
							<div class="sc-title">
								<div class="year"><span class="sc-select-year" name=""></span>年</div>
								<div class="month">
									<div class="arrow sc-mleft"></div>
									<div class="monthdiv">
										<span class="sc-select-month" name=""></span>
									</div>
									<div class="arrow sc-mright"></div>
								</div>
							</div>
							<div class="sc-week"></div> 
						</div>
						<div class="sc-body">
							<div class="sc-days"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3" style="padding-right:0px">
				<div class="announcement" style="margin:0px;">
					<ul class="matter">
					</ul>
				</div>
			</div>
		</div>
	</div>
		
</div>
<script src="__STATIC__/js/admin.js"></script>
<script type="text/javascript" src="__STATIC__/calendar/js/simple-calendar.js"></script>
<script type="text/javascript" src="__STATIC__/calendar/js/hammer-2.0.8-min.js"></script>
<script type="text/javascript">
	var myCalendar = new SimpleCalendar('#calendar');
	$(function(){
		var monthCH = $('.sc-select-month').text();
		$(".sc-mleft").click(function(){
			myCalendar.subMonth();
		   var year = $('.sc-select-year').text();
		   var monthCH = $('.sc-select-month').text();
		   var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
	   })
		$(".sc-mright").click(function(){
			myCalendar.addMonth();
			var year = $('.sc-select-year').text();
			var monthCH = $('.sc-select-month').text();
			var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
		})
	});
	
	//滑动切换
	var myElement = document.getElementById('calendar');
　　  			var hammer = new Hammer(myElement);
	hammer.on("swipeleft", function (ev) {
		myCalendar.addMonth();
	});
	hammer.on("swiperight", function (ev) {
		myCalendar.subMonth();
	});
	
	//添加标记
	var mark = {$timetable_data};
	myCalendar._defaultOptions.mark=mark;
	myCalendar.update();
	
	
	
	//显示当天的活动在初始化mark之后
	//初始化今天的活动
	announceList($('.sc-today'));
	//有标记的日期点击事件
	$('#calendar').on("click", '.sc-selected', function() {
		announceList($(this));
		if ($('a.js-ajax-my-btn').length) {
			Wind.use('artDialog', 'noty', function () {
				$('.js-ajax-my-btn').on('click', function (e) {
					e.preventDefault();
					var $_this  = this,
						$this   = $($_this),
						href    = $this.data('href'),
						refresh = $this.data('refresh'),
						msg     = $this.data('msg');
					href        = href ? href : $this.attr('href');
					if (!msg) {
						msg = "您确定要进行此操作吗？";
					}
					art.dialog({
						title: false,
						icon: 'question',
						content: msg,
						<!-- follow: $_this, -->
						lock: true,
						background: '#777', // 背景色
						opacity: 0.87,	// 透明度
						close: function () {
							$_this.focus(); //关闭时让触发弹窗的元素获取焦点
							return true;
						},
						ok: function () {
							$.ajax({
								url: href,
								type: 'post',
								success: function (data) {
									if (data.code == 1) {
										noty({
											text: data.msg,
											type: 'success',
											layout: 'center',
											modal: true,
											// animation: {
											//     open: 'animated bounceInDown', // Animate.css class names
											//     close: 'animated bounceOutUp', // Animate.css class names
											// },
											timeout: 2000,
											callback: {
												afterClose: function () {
													if (refresh == undefined || refresh) {
														if (data.url) {
															//返回带跳转地址
															window.location.href = data.url;
														} else {
															//刷新当前页
															reloadPage(window);
														}
													}
												}
											}
										}).show();

									} else if (data.code == 0) {
										//art.dialog.alert(data.info);
										art.dialog({
											content: data.msg,
											icon: 'warning',
											ok: function () {
												this.title(data.msg);
												return true;
											}
										});
									}
								}
							})
						},
						cancelVal: '关闭',
						cancel: true
					});
				});

			});
		}
	});
	
	//显示选择日期当天的活动
	function announceList(v){
		if(v.children().hasClass('sc-mark-show')){
			var year = $('.sc-select-year').text();
			var monthCH = $('.sc-select-month').text();
			var day = v.children()[1].innerText;
			var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
			var date = year + '-' + month + '-' + day;
			var content = mark[date];
			var matterHtml='';
			var attendance_mark='';
			for(var i=0;i<content.length;i++){
				if(content[i].code!=null&&content[i].code==5){
					attendance_mark='attendance_in';
				}
				else if(content[i].code!=null&&(content[i].code==2||content[i].code==3)){
					attendance_mark='attendance_out';
				}
				matterHtml +='<li class="announceItem '+attendance_mark+'"><div><div class="fl announceImg">'
					+'<img class=" " src="__STATIC__/calendar/images/content.png"></div>'
					+'<p class="announceContent">'+content[i].title+'</p>'
					+'<p class="announceContent">任课老师：'+content[i].teacher+'</p>'
					+'<p class="announceContent">'+content[i].startTime+' - '+content[i].endTime+'</p>'
					+'<p style="color:red;text-align:center;" class="announceContent">';
					if(content[i].code==null||content[i].code==0){
						matterHtml += '<button type="button" class="btn btn-info" style="width:48%;" onclick="javascript:attendance_2('+content[i].timetable_id+');">调课</button>'
						+'<a id="attendance_3" type="button" href="{:url('admin/student/attendance',['code'=>'3','student_id'=>$student['id']],'',true)}/timetable_id/'+content[i].timetable_id+'" data-msg="确定本次课要请假吗？" class="btn btn-info js-ajax-my-btn" style="color:#fff;width:48%;float:right;">请假</a>';
					}
					else if(content[i].code==5){
						matterHtml += '<p style="color:red;text-align:center;" class="announceContent">调课调入课程</p>';
					}
					else{
						var code_text = '';
						switch(content[i].code){
							case -3:
								code_text = '缺席';
								break;
							case -2:
								code_text = '早退';
								break;
							case -1:
								code_text = '迟到';
								break;
							case 1:
								code_text = '正常签到';
								break;
							case 2:
								code_text = '已调课';
								code_text += '<a id="attendance_3" href="{:url('admin/student/attendance',['code'=>'0','student_id'=>$student['id']],'',true)}/timetable_id/'+content[i].timetable_id+'" data-msg="确定不调课/请假了？" class="js-ajax-my-btn" style="color:blue;">（取消调课/请假）</a>';
								break;
							case 3:
								code_text = '已请假';
								code_text += '<a id="attendance_3" href="{:url('admin/student/attendance',['code'=>'0','student_id'=>$student['id']],'',true)}/timetable_id/'+content[i].timetable_id+'" data-msg="确定不调课/请假了？" class="js-ajax-my-btn" style="color:blue;">（取消调课/请假）</a>';
								break;
							default:
								code_text = 'unknown code!';
						}
						matterHtml += code_text+'</p>';
					}
					matterHtml += '</div></li>';
			}
			$('.matter').html(matterHtml);
		}else{
			var matterHtml=''
			matterHtml +='<li class="announceItem"><div><p class="announceContent">当前日期暂无课程</p></div></li>';
			$('.matter').html(matterHtml);
		}
	}
	
	function attendance_2(timetable_id){
		openIframeLayer("{:url('Class/select',array('id'=>'1'))}", '请选择调课班级', {
            area: ['1000px', '550px'],
            btn: ['确定', '取消'],
            yes: function (index, layero) {
                var iframeWin          = window[layero.find('iframe')[0]['name']];
                var selectedCategories = iframeWin.confirm();
                if (selectedCategories.selectedCategoriesId.length == 0) {
                    layer.msg('请选择班级');
                    return;
                }
                layer.close(index); //如果设定了yes回调，需进行手工关闭
				openIframeLayer("{:url('Class/class_timetable_view',['state'=>'select'],'',true)}/id/"+selectedCategories.selectedCategoriesId.join(','), '请点击日期以选择课次', {
				area: ['1000px', '550px'],
				btn: ['确定', '取消'],
				yes: function (win, layero) {
					var iframeWin          = window[layero.find('iframe')[0]['name']];
					var timetable_data = iframeWin.confirm();
					if (timetable_data == null||timetable_data == '') {
						layer.msg('请选择课次');
						return;
					}
					var url_do = "{:url('admin/student/attendance',['code'=>'2','student_id'=>$student['id']],'',true)}/timetable_id/"+timetable_id+"/target/"+timetable_data['id'];
					<!-- do操作 -->
					<!-- alert(url_do); -->
					art.dialog({
						title: '确认进行调课操作！',
						icon: 'question',
						lock: true,
						background: '#777', // 背景色
						opacity: 0.87,	// 透明度
						content: '班级：'+timetable_data['class_name']+'</br>第'+timetable_data['times']+'次课，共'+timetable_data['class_number']+'次</br>上课时间：'+timetable_data['start_time']+'-'+timetable_data['end_time']+'</br>任课老师：'+timetable_data['teacher_name']+'</br>教室：'+timetable_data['classroom_name'],
						ok: function () {
							$.ajax({
								url: url_do,
								type: 'post',
								success: function (data) {
									if (data.code == 1) {
										noty({
											text: data.msg,
											type: 'success',
											layout: 'center',
											modal: true,
											// animation: {
											//     open: 'animated bounceInDown', // Animate.css class names
											//     close: 'animated bounceOutUp', // Animate.css class names
											// },
											timeout: 2000,
											callback: {
												afterClose: function () {
													reloadPage(window);
												}
											}
										}).show();

									} else if (data.code == 0) {
										//art.dialog.alert(data.info);
										art.dialog({
											content: data.msg,
											icon: 'warning',
											ok: function () {
												this.title(data.msg);
												return true;
											}
										});
									}
								}
							})
						},
						cancelVal: '关闭',
						cancel: true
					});
					<!-- 操作结束 -->
					layer.close(win); //如果设定了yes回调，需进行手工关闭
				}
			});
            }
        });
	}
</script>
</body>
</html>